<!DOCTYPE html>
<html style="margin:0;">

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
    html {
        height: 100%;
        margin-top: 10px;
    }
    
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
    
    #container {
        height: 100%;
    }
    </style>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cUVcaPVTlIznNo4BrEFsQmS8">
    //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
    </script>
    <script type="text/javascript" src="map.js"></script>
</head>

<body>
    <div style="float:left;width:28%;height:150px;background:#000;color:#00FF24;position:fixed;top:0;left:0;">
        <div id="currentCoordinate"></div>
        <div id="console"></div>
    </div>
    <div id="inputSection" style="float:left;width:28%;height:100%;overflow-y:auto;">
        <table id="t_1" style="margin-top:150px;">
            <tr>
                <td>
                    <label for=""><strong>根据纬经度显示位置</strong></label>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">经度</label>
                    <input type="text" id="lng" placeholder="请输入经度">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">纬度</label>
                    <input type="text" id="lat" placeholder="请输入纬度">
                </td>
            </tr>
            <tr>
                <td>
                    <button id="b_1">点我看看</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="ipLocation">根据ip定位</button>
                </td>
            </tr>
            <tr>
                <td><strong>显示一组坐标的轨迹</strong></td>
            </tr>
            <tr id="coorsAfter">
                <td>
                    <button id="addOneCoor">增加一个坐标</button>
                    <button id="showCoors">显示轨迹</button>
                    <button id="clearCoors">删除轨迹</button>
                </td>
            </tr>
            <tr class="oneOfCoors">
                <td>
                    <input type="text" placeholder="经度" class="lng" value="116.399">
                    <input type="text" placeholder="纬度" class="lat" value="39.910">
                    <button class="delOneCoor">删除</button>
                </td>
            </tr>
            <tr class="oneOfCoors">
                <td>
                    <input type="text" placeholder="经度" class="lng" value="116.405">
                    <input type="text" placeholder="纬度" class="lat" value="39.920">
                    <button class="delOneCoor">删除</button>
                </td>
            </tr>
            <tr class="oneOfCoors">
                <td>
                    <input type="text" placeholder="经度" class="lng" value="116.425">
                    <input type="text" placeholder="纬度" class="lat" value="39.900">
                    <button class="delOneCoor">删除</button>
                </td>
            </tr>
        </table>
    </div>
    <div id="container" style="float:left; width:72%; height:100%;"></div>
    <script type="text/javascript">
    $(document).ready(function() {
        //测试初始化地图
        var map = initBMap();

        //测试显示坐标点
        $("#b_1").click(function(event) {
            var lng = $("#lng").val();
            var lat = $("#lat").val();
            if (lng && lat) {
                var coor = pos(lng, lat);
                showPosByCoordinate(map, coor);
            }

        });

        //测试根据ip显示位置
        $("#ipLocation").click(function(event) {
            showPosByIp(map);
        });

        //接受用户输入坐标组
        $("#addOneCoor").click(function(event) {
            var oneCoorField = '<tr class="oneOfCoors"><td><input type="text" placeholder="经度" class="lng" /> <input type="text"placeholder="纬度" class="lat" /> <button class="delOneCoor">删除</button></td></tr>';
            $("tr.oneOfCoors:last").after(oneCoorField);
            $(".delOneCoor").each(function(index, el) {
                $(this).click(function(event) {
                    $(this).parents(".oneOfCoors").remove();
                });
            });
        });
        //测试显示一组坐标轨迹
        $("#showCoors").click(function(event) {
            var pointArr = new Array();
            $(".oneOfCoors").each(function(index, el) {
                var lng = $(this).find('.lng').val();
                var lat = $(this).find('.lat').val();
                if (lng <= 0 && lat <= 0)
                    return;
                var point = pos(lng, lat);
                pointArr.push(point);
            });
            showPathByCoordinates(map, pointArr);
        });
        //测试清除一组坐标轨迹
        $("#clearCoors").click(function(event) {
            removeOverlay(map);
        });

    });
    </script>
</body>

</html>
